<!-- 我的 -->
<template>
  <view class="my">
    <!-- 头像 -->
    <view class="my-top">
      <view class="mt-left">
        <image src="/static/头像.png" mode="scaleToFill" @click="setup('/pages/mine/preson/proson')" />
        <view class="vip">
          <image src="/static/会员等级.png" mode="scaleToFill" />
          <view>铲屎平民</view>
        </view>
      </view>
      <view class="mt-right">
        <view class="mr-name">
          <view class="mr-name-text">用户昵称</view>
          <view class="mr-name-phon">15550015998</view>
        </view>
        <view class="mr-icon" @click="setup('/pages/mine/message/message')" >
          <uv-icon name="chat-fill" color="#2979ff" size="28"></uv-icon>
        </view>
      </view>
    </view>
    <!-- 会员中心 -->
    <view class="my-vip" @click="setup('/pages/membercenter/membercenter')">
      <view class="mv-box">
        <view class="mv-box-left">会员中心</view>
        <view class="mv-box-right"> 在线答疑权益;免费批改次数...... </view>
      </view>
    </view>
    <!-- 宫格 -->
    <view class="my-grid">
      <uv-grid :col="4" :border="false" customStyle="padding: 50rpx 0">
        <uv-grid-item
          v-for="(item, index) in baseList"
          :key="index"
          customStyle="padding: 20rpx 0"
          @click="setup(item.url)"
        >
          <uv-icon
            :customStyle="{ paddingTop: 20 + 'rpx' }"
            :name="item.name"
            :size="30"
          ></uv-icon>
          <text class="grid-text">{{ item.title }}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
    <!-- 客服 -->
     <view class="my-service" @click="setup('/pages/exclusivecustomer/exclusivecustomer')">
      <image
        src="/static/客服.png"
        mode="scaleToFill"
      />
      <view class="ms-text">客服</view>
     </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const baseList = ref([
  {
    name: "/static/钱包.png",
    title: "我的钱包",
    url:"/pages/classify/purse/purse"
  },
  {
    name: "/static/宠物.png",
    title: "我的宠物",
    url:"/pages/classify/pet/pet"
  },
  {
    name: "/static/购物车.png",
    title: "购物车",
    url:'#'
  },
  {
    name: "/static/收货地址.png",
    title: "收货地址",
    url:'#'
  },
  {
    name: "/static/优惠券.png",
    title: "优惠券",
    url:"#"
  },
  {
    name: "/static/邀请好友.png",
    title: "邀请好友",
    url:"#"
  },
  {
    name: "/static/投诉建议.png",
    title: "投诉建议",
    url:'#'
  },
  {
    name: "/static/设置.png",
    title: "设置",
    url: "#",
  },
]);
const setup = (url) => {
  if (url) {
    uni.navigateTo({
      url: url,
    });
  } else {
    uni.showToast({
      title: "没有要跳转的页面",
      icon: "none",
    });
  }
};
</script>

<style lang="scss" scoped>
@import url(./mine.css);
</style>